<template>
    <el-container class="export_setting_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :searchForm="searchForm"
                                @event="handleHeaderEvent" >
                    <template slot="left_search">
                        <el-alert type="success" style="margin: 0 10px;"
                                  :closable="false">变更业务模板的功能：先下载模板，修改，再上传。修改方法是：在表头或表尾设置LOGO 图片、修改固定式文字，以2个大括号开头2个大括号结尾的是占位变量，会被实际的数据所代替，请不要修改。</el-alert>
                    </template>
                </headerTemplate>
                <div class="card_content">
                    <vxe-table-template :data="dataList" :options.sync="tableOptions"
                                        @event="handleTableEvent" />
                </div>
            </el-card>
        </el-main>
        <custom-upload ref="upload" :options="uploadOptions" style="display: none;" />
    </el-container>
</template>

<script>
import { mapState } from "vuex";
import { download } from "@common/utils/download";

export default {
    name: "index",
    components: {
        CustomUpload: () => import('@common/components/custom/ElUpload'),
    },
    data() {
        const _this = this;
        return {
            searchForm: {},
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            _this.getList(true);
                        },
                    },
                ],
            },
            dataList: [],
            tableOptions: {
                ref: "ExportSettingTable",
                container: ".export_setting_container",
                columns: [
                    {
                        label: '模板名称',
                        prop: 'display_text',
                        align: 'center',
                        minWidth: 100,
                    },
                ],
                operates: {
                    fixed: "right",
                    list: [
                        {
                            id: "info",
                            icon: "el-icon-download",
                            type: "warning",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "下载模板",
                            },
                            method: (index, row) => {
                                _this.downloadFile(row);
                            },
                        },
                        {
                            id: "edit",
                            icon: "el-icon-upload",
                            type: "success",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "上传模板",
                            },
                            method: (index, row) => {
                                _this.handleUploadFile(row);
                            },
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                },
            },
            uploadOptions: {
                action: `${ window.configs.requestPrefix }${ _this.$api.FILE_UploadFile }`,
                headers: {
                    token: _this.$store.state.accessToken.token,
                },
                accept: '.xlsx',
                limit: 1,
                showFileList: false,
            },
        };
    },
    computed: {
        ...mapState([ 'application' ]),
    },
    mounted() {
        this.getList(true);
    },
    methods: {
        handleHeaderEvent(event) {
            let _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === "search") {
                _this.getList(true);
            } else if (event.type === "refresh") {
                _this.getList(true);
            }
        },
        getList(query) {
            let _this = this;
            _this.dataList = [];
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            queryData.key1 = 'export_template';
            queryData.key2 = _this.application;
            _this.fetchData(_this.$api.API_FindCommonParameters, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {
            });
        },
        handleTableEvent(event) {
            const _this = this;
            if (event.type === 'page') {
                _this.getList();
            }
        },
        downloadFile(row) {
            const _this = this;
            let downloadUrl = _this.$utils.getDownloadExcelTemplateUrl(row.value);
            download({
                url: downloadUrl,
                name: row.value,
            });
        },
        handleUploadFile(row) {
            const _this = this;
            if (!_this.$refs.upload) {
                return;
            }
            _this.uploadOptions = $.extend({}, _this.uploadOptions, {
                data: {
                    biz_type: row.key1,
                    associate_biz_sid: row.value,
                    account_set_sid: _this.$utils.getAccountSetSid(),
                },
                onSuccess(file) {
                    _this.$message.success('上传模板成功！');
                },
            });
            _this.$refs.upload.upload();
        },
    },
}
</script>

<style scoped lang="less">
.export_setting_container {
    width: 100%;
    height: 100%;
    overflow: hidden;

    /deep/.el-card__body {
        width: 100%;
        height: calc(100% - 46px);

        .card_content {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
